<template>
  <!-- 查看 -->
  <el-dialog title="查看工单" append-to-body :visible.sync="CkDialog" width="1200px" class="ckLog">
    <div style="
        cursor: pointer;
        width: 40px;
        height: 40px;
        position: absolute;
        right: 2vh;
      " @click="CkDialog = false"></div>
    <!-- <div
      style="
        font-family: SourceHanSansSC, SourceHanSansSC;
        font-weight: bold;
        font-size: 24px;
        color: #ffffff;
        line-height: 35px;
        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
        text-align: center;
        font-style: normal;
      "
    >
      查看工单
    </div> -->
    <div style="margin-top: 20px">
      <div style="
          width: 100%;

          font-size: 16px;
          overflow: auto;
          scrollbar-width: none;
        ">
        <!-- 工单信息 -->
        <div style="width: 100%; display: flex; flex-wrap: wrap">
          <div v-for="(item, k) in CKFromType" :key="k" style="display: flex; min-height: 35px"
            :style="{ width: item.width || '50% ' }">
            <div style="width: 100px; font-weight: bold">{{ item.name }}</div>
            <div style="width: calc(100% - 100px)" class="valcope">
              <div v-if="item.map && item.map.length > 0">
                {{ getCul(item.map, CkFrom[item.code]) }}
              </div>
              <div v-else-if="item.code == 'yjsj'">
                {{ parseTime(CkFrom[item.code]) }}
              </div>
              <div v-else>{{ CkFrom[item.code] }}</div>
            </div>
          </div>
        </div>
        <div class="fgx" v-if="CkFrom.yjtp || CkFrom.pictureUrl"></div>
        <!-- 处理前后图片 -->
        <div v-if="CkFrom.yjtp || CkFrom.pictureUrl" style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #ffffff;
            border-bottom: 1px solid #ffffff;
            padding-bottom: 10px;
            margin-bottom: 10px;
          ">
          <div class="clBox">
            <div class="clBox_title">处理前照片</div>
            <!-- <image-upload
                v-model="CkFrom.qtp"
                :disabled="true"
                :isShowTip="false"
              /> -->
            <div v-if="CkFrom.yjtp" style="display: flex; max-width: 100%; overflow: auto">
              <template v-if="judgeVal(CkFrom.yjtp)">
                <el-image v-for="(item, i) in CkFrom.yjtp" :key="i"
                  style="width: 100px; height: 100px; margin-right: 10px" :src="item" :preview-src-list="CkFrom.yjtp">
                </el-image>
              </template>
              <template v-else>
                <image-preview v-if="CkFrom.yjtp" :src="realSrc(CkFrom.yjtp)" width="100%"
                  height="27vh"></image-preview>
                <div v-else>暂无识别图片</div>
              </template>
            </div>
            <div v-else class="err">暂无图片</div>
          </div>
          <div style="width: 1px; height: 100%; background-color: #ffffff"></div>
          <div class="clBox">
            <div class="clBox_title">处理后照片</div>
            <!-- <image-upload
                v-model="CkFrom.pictureUrl"
                :disabled="true"
                :isShowTip="false"
              /> -->
            <div v-if="CkFrom.pictureUrl" style="display: flex; max-width: 100%; overflow: auto">
              <div v-for="(item, l) in CkFrom.pictureUrlList" :key="l" style="margin-right: 10px">
                <!-- <img :src="item" alt="" style="width: 200px; height: 140px" /> -->

                <el-image style="width: 200px; height: 140px" :src="item" :preview-src-list="CkFrom.pictureUrlList">
                </el-image>
              </div>
            </div>
            <div v-else class="err">暂无图片</div>
          </div>
        </div>
        <!-- 处理前后视频 -->
        <div class="fgx" v-if="CkFrom.yjsp"></div>
        <div v-if="CkFrom.yjsp" style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #ffffff;
            border-bottom: 1px solid #ffffff;
            padding-bottom: 10px;
            margin-bottom: 10px;
          ">
          <div class="clBox">
            <div class="clBox_title">处理前视频</div>
            <!-- <image-upload
                v-model="CkFrom.qtp"
                :disabled="true"
                :isShowTip="false"
              /> -->
            <div v-if="CkFrom.yjsp" style="display: flex; max-width: 100%; overflow: auto">
              <video v-show="CkFrom.yjsp" style="width: 100%" :src="realSrc(CkFrom.yjsp)" controls="controls"
                :autoplay="false" muted="muted"></video>
            </div>
            <div v-else class="err">暂无视频</div>
          </div>
          <div style="width: 1px; height: 179px; background-color: #ffffff"></div>
          <div class="clBox">
            <div class="clBox_title">处理后视频</div>
            <!-- <image-upload
                v-model="CkFrom.pictureUrl"
                :disabled="true"
                :isShowTip="false"
              /> -->
            <div v-if="CkFrom.yjsp" style="display: flex; max-width: 100%; overflow: auto">
              <video v-show="CkFrom.yjsp" style="width: 100%" :src="realSrc(CkFrom.yjsp)" controls="controls"
                :autoplay="false" muted="muted"></video>
            </div>
            <div v-else class="err">暂无视频</div>
          </div>
        </div>
        <!-- 流程 -->
        <div>
          <el-table :data="ckTableData" style="width: 100%">
            <el-table-column prop="zxhj" label="执行环节"> </el-table-column>
            <el-table-column prop="zxr" label="执行人"> </el-table-column>
            <el-table-column prop="startTime" label="开始时间">
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间"> </el-table-column>
            <el-table-column prop="tjyj" label="提交意见"> </el-table-column>
            <el-table-column prop="ruls" label="任务历时"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div style="
          display: flex;
          flex-direction: row;
          justify-content: center;
          margin-top: 20px;
        ">
        <el-button style="
            width: 120px;
            height: 40px;
            background: rgba(16, 29, 52, 0.8);
            border-radius: 2px;
            color: #ffffff;
            border-width: 0px;
          " @click="CkDialog = false">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { isExternal } from "@/utils/validate";
import {
  selectEarlyWarningList,
  selectEarly,
  deptTree,
  workOrderAdd,
  earlyWarning,
  getWorkById,
} from "@/api/daping/daping";
export default {
  dicts: ["warn_types", "warn_level", "warn_status"],
  data() {
    return {
      baseUrl: "http://10.22.71.240:8066",
      CkDialog: false,
      userData: null,
      ckTableData: [],
      CkFrom: {
        gdbh: "xxxx",
        wtlx: "123",
        qtp: "",
        htp: "",
      },
      CKFromType: [
        { name: "基站名称", code: "name", width: "33%" },
        { name: "mac地址", code: "mac", width: "33%" },
        {
          name: "告警类型",
          code: "warningType",
          mapShow: "warn_types",
          map: [],
          width: "33%",
        },
        {
          name: "处理状态",
          code: "clzt",
          mapShow: "warn_handle_status",
          width: "33%",
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.CKFromType.forEach((item) => {
        if (item.mapShow) {
          item.map = this.dict.type[item.mapShow];
        }
      });
    });
  },
  methods: {
    realSrc(src) {
      if (!src) {
        return;
      }
      let real_src = src.split(",")[0];
      if (isExternal(real_src)) {
        return real_src;
      }
      return process.env.VUE_APP_BASE_API + real_src;
      // return this.src;
    },
    async getCk(id) {
      console.log(id,'id');
      
      await this.getWorkByIdL(id);
      this.CkDialog = true;
    },
    getWorkByIdL(id) {
      getWorkById(id).then((res) => {
        if (res.code == 200 && res.data) {
          this.CkFrom = {
            ...res.data,
            xdsj: this.parseTime(res.data.xdsj),
            pictureUrlList: this.getImgUrl(res.data.pictureUrl),
          };
          this.ckTableData = res.data.czjl.map((n) => ({
            ...n,
            startTime: this.parseTime(n.kssj),
            endTime: this.parseTime(n.jssj),
            ruls: this.getDateCope(n.kssj, n.jssj),
          }));
          console.log(this.CkFrom, " this.CkFrom");
        } else {
          this.$message({
            message: "任务流程id已删除,查询为空",
            type: "warning",
          });
          this.CkFrom = {};
          this.ckTableData = [];
        }
      });
    },
    getImgUrl(val) {
      if (val) {
        // 首先将值转为数组
        const list = Array.isArray(val) ? val : val.split(",");
        // 然后将数组转为对象数组
        // let imgList=[]
        return list.map((item) => {
          if (typeof item === "string") {
            if (item.indexOf(this.baseUrl) === -1) {
              item = this.realSrc(item);
            } else {
              item = { name: item, url: item };
            }
          }
          return item;
        });
      } else {
        this.fileList = [];
        return [];
      }
    },
    getDateCope(startTime, endTime) {
      // var new_date = new Date(startTime); //新建一个日期对象，默认现在的时间
      // var old_date = new Date(endTime); //设置过去的一个时间点，"yyyy-MM-dd HH:mm:ss"格式化日期
      var new_date = new Date(endTime); //新建一个日期对象，默认现在的时间
      var old_date = new Date(startTime); //设置过去的一个时间点，"yyyy-MM-dd HH:mm:ss"格式化日期

      var difftime = (new_date - old_date) / 1000; //计算时间差,并把毫秒转换成秒

      var days = parseInt(difftime / 86400); // 天  24*60*60*1000
      var hours = parseInt(difftime / 3600) - 24 * days; // 小时 60*60 总小时数-过去的小时数=现在的小时数
      var minutes = parseInt((difftime % 3600) / 60); // 分钟 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
      var seconds = parseInt(difftime % 60); // 以60秒为一整份 取余 剩下秒数
      return `${days}天${hours}小时${minutes}分钟${seconds}秒`;
    },
    getCul(list, val, cxz, fhz) {
      let obj = {};
      let fhzd = fhz || "label";
      let cxzd = cxz || "value";
      let listD = JSON.parse(JSON.stringify(list));
      listD.forEach((item) => {
        if (item[cxzd] == val) {
          obj = item;
        }
      });
      return obj[fhzd];
    },
    judgeVal(val, type) {
      let m = false;
      if (val instanceof Array) {
        m = true;
      }
      return m;
    },
  },
};
</script>
<style scoped>
.ckLog ::v-deep .el-dialog {
  background: #fff;
}

.ckLog ::v-deep .el-dialog__body {
  background: #fff;
  /* background: url("~@/assets/images/ld/dabj.png") no-repeat; */
  /* background-size: 100% 100%; */
  width: 100%;
  /* max-height: 80vh; */
  height: auto;
}

::v-deep .el-dialog__header {
  /* display: none; */
}

::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 10vh !important;
  /* background-color: transparent; */
}

::v-deep .el-form-item__label {
  /* color: #fff; */
}

::v-deep .el-textarea__inner {
  background: rgba(255, 255, 255, 0.3) !important;
  font-family: SourceHanSansSC, SourceHanSansSC;
  font-weight: 400;
  font-size: 14px;
  /* color: #ffffff !important; */
  line-height: 20px;
  text-align: left;
  font-style: normal;
}

::v-deep .el-input--medium .el-input__inner {
  background: rgba(255, 255, 255, 0.3) !important;
  font-family: SourceHanSansSC, SourceHanSansSC;
  font-weight: 400;
  font-size: 14px;
  /* color: #ffffff !important; */
  line-height: 20px;
  text-align: left;
  font-style: normal;
}

::v-deep .el-table {
  /* background-color: #bac0c9; */
  /* background-color: rgba(21, 46, 76, 0.1); */
}

::v-deep .el-table__cell {
  /* color: #fff; */
  /* background-color: #bac0c9; */
  /* background-color: rgba(21, 46, 76, 0.1); */
}

::v-deep .el-table__row {
  /* background-color: #bac0c9; */
  /* background-color: rgba(21, 46, 76, 0.1); */
}

::v-deep .el-table__row--striped {
  /* background-color: rgba(21, 46, 76, 0.3); */
}

::v-deep .el-table__body tr:hover>td {
  /* color: #fff; */
  /* background-color: #134087 !important; */
}

::v-deep .el-table th.el-table__cell>.cell {
  /* color: #fff; */
}

.clBox {
  width: 49.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.clBox_title {
  line-height: 35px;
  width: 100%;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #666;
}

.fgx {
  margin: 5px 0;
  width: 100%;
  height: 1px;
  background: #dfe6ec;
}

.err {
  width: 100%;
  height: calc(100% - 36px);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
</style>
